<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="cesium-viewer" ref="viewerDivRef"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref} from 'vue'
import { TileMapServiceImageryProvider, Viewer, buildModuleUrl } from 'cesium'
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'

declare global {
  interface Window {
    CESIUM_BASE_URL: string
  }
} 

const viewerDivRef = ref<HTMLDivElement>()
window.CESIUM_BASE_URL = 'node_modules/cesium/Build/CesiumUnminified/'

onMounted(() => {
  new Viewer(viewerDivRef.value as HTMLElement, {
    imageryProvider: new TileMapServiceImageryProvider({
      url: 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII',
    })
  })
})
</script>

<style>
@media (min-width: 1024px) {
  .about {
    width: 100vw;
    /* min-height: 100vh; */
    /* display: flex;
    align-items: center; */
  }
}
</style>
